<script setup>
import {ref, watch, computed, reactive} from "vue"
import colors from "../Data/colors.js"
import {getTableRow, getTableColumn} from "../Data/elements.js"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {}
            }
        }
    }
})

const formType = ref("style")
const edit = ref(false)
const state = reactive({
    rowCount: props.elem.dataConfig.rowCount,
    columnCount: props.elem.dataConfig.columnCount,
})

// 当行数和列数变化时重新生成表格column 结构
const resetTableColumns = () => {
    console.log(props.elem.dataConfig)
    const rows = []
    for (let i = 0; i < props.elem.dataConfig.rowCount; i++) {
        const row = getTableRow(i)
        for (let j = 0; j < props.elem.dataConfig.columnCount; j++) {
            row.children.push(getTableColumn(row.rowIndex, j))
        }
        rows.push(row)
    }
    props.elem.children = rows;
}

/**
 * 当表格fontSize 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.columnStyleConfig.fontSize, (val) => {
    props.elem.children.map(row => {
        row.children.map(column => {
            column.styleConfig.fontSize = val
            column.children.map((cell) => {
                cell.styleConfig.fontSize = val
            })
        })
    })
})
/**
 * 当表格fontWeight 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.columnStyleConfig.fontWeight, (val) => {
    props.elem.children.map(row => {
        row.children.map(column => {
            column.styleConfig.fontWeight = val
            column.children.map((cell) => {
                cell.styleConfig.fontWeight = val
            })
        })
    })
})
/**
 * 当表格color 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.columnStyleConfig.color, (val) => {
    props.elem.children.map(row => {
        row.children.map(column => {
            column.styleConfig.color = val
            column.children.map((cell) => {
                cell.styleConfig.color = val
            })
        })
    })
})
/**
 * 当表格padding 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.columnStyleConfig.padding, (val) => {
    props.elem.children.map(row => {
        row.children.map(column => {
            column.styleConfig.padding = val
        })
    })
})

const setRowCount = () => {
    $confirm("确定修改行数吗？", "修改表格行数会重置表格内所有数据，您确定要修改并重置表格么？", (ok) => {
        if (!ok) return
        props.elem.dataConfig.rowCount = state.rowCount
        resetTableColumns()
    })
}
const setColumnCount = () => {
    $confirm("确定修改列数吗？", "修改表格列数会重置表格内所有数据，您确定要修改并重置表格么？", (ok) => {
        if (!ok) return
        props.elem.dataConfig.columnCount = state.columnCount
        resetTableColumns()
    })
}

</script>

<template>
    <div class="Table1 print-template-element-form-container ">
        <el-radio-group v-model="formType" size="small">
            <el-radio-button value="style">样式</el-radio-button>
            <el-radio-button value="data">数据</el-radio-button>
        </el-radio-group>
        <el-divider style="margin: 10px 0"></el-divider>
        <!--样式表单-->
        <el-form v-if="formType==='style'" :model="elem.columnStyleConfig" class="form" label-position="left" label-width="80px" size="small">
            <div class="node-name" @dblclick="edit = true">
                <el-input v-if="edit" v-model="elem.name" autofocus @blur="edit = false" @keydown="e => e.code === 'Enter' ? edit = false : ''" />
                <span v-else style="font-size: 20px">{{ elem.name }}</span>
            </div>
            <el-form-item label="文字大小">
                <el-select v-model="elem.columnStyleConfig.fontSize" filterable style="width: 100%">
                    <el-option v-for="i in 30" :key="i" :value="(10+i) + 'px'">{{ 10 + i }}px</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文字颜色">
                <el-color-picker v-model="elem.columnStyleConfig.color" :predefine="colors" show-alpha />
            </el-form-item>
            <el-form-item label="字体粗细">
                <el-radio-group v-model="elem.columnStyleConfig.fontWeight">
                    <el-radio value="normal">普通</el-radio>
                    <el-radio value="bold">粗体</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="内边距">
                <el-input v-model="elem.columnStyleConfig.padding" />
            </el-form-item>
            <FCssStyle :css-style="elem.styleConfig" @use="sty => elem.styleConfig = sty"/>
        </el-form>
        <!--数据表单-->
        <el-form v-if="formType==='data'" :model="elem.dataConfig" class="form" label-position="left" label-width="80px" size="small">
            <el-form-item label="行数">
                <el-input-number v-model="state.rowCount" :min="1" />
                <el-button type="primary" plain @click="setRowCount" style="margin-left: 10px">确定</el-button>
            </el-form-item>
            <el-form-item label="列数">
                <el-input-number v-model="state.columnCount" :min="1" />
                <el-button type="primary" plain @click="setColumnCount" style="margin-left: 10px">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.column {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px dashed var(--el-color-primary-light-7);
    margin-bottom: 10px;
}
</style>